<template>
  <div class="search">
    <span>起始月份</span>
    <el-date-picker
      size="small"
      v-model="start"
      type="month"
      align="left"
      placeholder="选择月份"
      @change="handleChange">
    </el-date-picker>
    <span style="margin-left: 30px;">结束月份</span>
    <el-date-picker
      size="small"
      v-model="end"
      type="month"
      align="left"
      placeholder="选择月份"
      @change="handleChange">
    </el-date-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        start: "",
        end: ""
      };
    },
    created() {
      let filData = Lockr.get("filData");
      if(filData){
        this.start = filData.start;
        this.end = filData.end;
      }

    },
    methods: {
      handleChange(){
        Lockr.set("filData", {start:this.start,end:this.end});
        this.fetchData(this.start,this.end);
      }
    },
    props: ["fetchData"]
  };
</script>
<style lang="css" scoped>
  .search {
    position: fixed;
    top: 25px;
    left: 450px;
    z-index: 999;
    color: #666;
    /* width: 50%; */
  }
  .search .el-date-editor--daterange.el-input,
  .search .el-select {
    max-width: 190px;
    margin-right: 30px;
  }
  .search .el-select-dropdown__wrap .el-scrollbar__wrap{
    margin: 0;
  }
</style>
